﻿<?php
include('../confing/common.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?=$conf['sitename']?></title>
    <link rel="stylesheet" href="../assets/login/style.css">
    <link rel="stylesheet" href="../assets/layui/css/layui.css"/>
</head>
<body>
    <!-- partial:index.partial.html -->
    <!DOCTYPE html>
    <html lang="es" dir="ltr">
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap" rel="stylesheet">
    </head>
    <body>
        <div id="login1" class="main">
            <div class="container a-container" id="a-container">
                <form @submit.prevent="" class="form" method="post">
					<h2 class="form_title title">用户登录</h2>
					<div class="form__icons" style="margin-bottom: 20px">
						<img src="../assets/images/qq.png" style="height:28px;margin: -4px 5px 0 5px;" id="connect_qq">
					</div>
					<input v-model="dl.user" class="form__input" type="text" placeholder="请输入账号">
					<input v-model="dl.pass" class="form__input" type="password" placeholder="请输入密码">
					<button @click="login" class="form__button button">立即登录</button>
					<div @click="goReg" class="mobile-txt">还没有账号？点击注册</div>
				</form>
            </div>
            <div class="container b-container" id="b-container">
                <form @submit.prevent="" class="form" method="post">
					<h2 class="form_title title">用户注册</h2>
					<input v-model="reg.name" class="form__input" type="text" placeholder="请输入昵称">
					<input v-model="reg.yqm" class="form__input" type="text" placeholder="请输入邀请码">
					<input v-model="reg.user" class="form__input" type="text" placeholder="请输入账号(QQ号)">
					<input v-model="reg.pass" class="form__input" type="password" placeholder="请输入密码">
					<button @click="register" class="form__button button">立即注册</button>
					<div @click="goLogin" class="mobile-txt">已有账号？点击登录</div>
				</form>
            </div>
            <div class="switch" id="switch-cnt">
                <div class="switch__circle"></div>
                <div class="switch__circle switch__circle--t"></div>
                <div class="switch__container" id="switch-c1">
                    <h2 class="switch__title title">欢迎回来 !</h2>
                    <p class="switch__description description">与我们保持联系,请登录您的个人信息</p>
                    <button id="goReg" class="switch__button button switch-btn">立即注册</button>
                </div>
                <div class="switch__container is-hidden" id="switch-c2">
                    <h2 class="switch__title title">你好朋友 !</h2>
                    <p class="switch__description description">输入您的个人信息,并开始与我们沟通</p>
                    <button id="goLogin" class="switch__button button switch-btn">立即登录</button>
                </div>
            </div>
        </div>
    </body>
</html>
<!-- partial -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="assets/js/fb.min.js"></script>
<script src="layer/3.1.1/layer.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#login1",
        data: {
            loginType: true,
            title: "你在看什么呢？我写的代码好看吗",
            dl: {},
            reg: {}
        },
        methods: {
            newlogin: function() {
                this.loginType = !this.loginType
            },
            login: function() {
                if (!this.dl.user || !this.dl.pass) {
                    layer.msg('账号密码不能为空', {
                        icon: 2
                    });
                    return
                }
                var loading = layer.load(2);
                vm.$http.post("/apisub.php?act=login", {
                    user: this.dl.user,
                    pass: this.dl.pass
                }, {
                    emulateJSON: true
                }).then(function(data) {
                    layer.close(loading);
                    if (data.data.code == 1) {
                        layer.msg(data.data.msg, {
                            icon: 1
                        });
                        setTimeout(function() {
                            window.location.href = "/"
                        }, 1000);
                    } else if (data.data.code == 5) {
                        vm.login2();
                    } else {
                        layer.msg(data.data.msg, {
                            icon: 2
                        });
                    }
                });

            },
            register: function() {
                if (!this.reg.user || !this.reg.pass || !this.reg.name || !this.reg.yqm) {
                    layer.msg('所有项不能为空', {
                        icon: 2
                    });
                    return
                }
                var loading = layer.load(2);
                this.$http.post("/apisub.php?act=register", {
                    name: this.reg.name,
                    user: this.reg.user,
                    pass: this.reg.pass,
                    yqm: this.reg.yqm
                }, {
                    emulateJSON: true
                }).then(function(data) {
                    layer.close(loading);
                    if (data.data.code == 1) {
                        this.loginType = true;
                        this.dl.user = this.reg.user;
                        this.dl.pass = this.reg.pass;
                        layer.msg(data.data.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(data.data.msg, {
                            icon: 2
                        });
                    }
                });
            },
            login2: function() {
                layer.prompt({
                    title: '管理二次验证',
                    formType: 3
                }, function(pass2, index) {
                    var loading = layer.load(2);
                    vm.$http.post("/apisub.php?act=login", {
                        user: vm.dl.user,
                        pass: vm.dl.pass,
                        pass2: pass2
                    }, {
                        emulateJSON: true
                    }).then(function(data) {
                        layer.close(loading);
                        if (data.data.code == 1) {
                            layer.msg(data.data.msg, {
                                icon: 1
                            });
                            setTimeout(function() {
                                window.location.href = "/"
                            }, 1000);
                        } else {
                            layer.msg(data.data.msg, {
                                icon: 2
                            });
                        }
                    });
                });
            },
            goLogin: function() {
                document.getElementById('goLogin').click()
            },
            goReg: function() {
                document.getElementById('goReg').click()
            }
        },
        mounted() {
        }
    });

    $('#connect_qq').click(function() {
        var ii = layer.load(0, {
            shade: [0.1, '#fff']
        });
        $.ajax({
            type: "POST",
            url: "../qq_login.php",
            data: {"type":'qq'},
            dataType: 'json',
            success: function(data) {
                layer.close(ii);
                if (data.code == 1) {
                    window.location.href = data.url;
                } else {
                    layer.alert(data.msg, {
                        icon: 7
                    });
                }
            }
        });
    });
    
</script>
<script src="../assets/login/script.js"></script>
</body>
</html>
<script>
            var stop, staticx;
			var img = new Image();
			img.src = "";
 
			function Sakura(x, y, s, r, fn) {
				this.x = x;
				this.y = y;
				this.s = s;
				this.r = r;
				this.fn = fn;
			}
 
			Sakura.prototype.draw = function(cxt) {
				cxt.save();
				var xc = 40 * this.s / 4;
				cxt.translate(this.x, this.y);
				cxt.rotate(this.r);
				cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
				cxt.restore();
			}
 
			Sakura.prototype.update = function() {
				this.x = this.fn.x(this.x, this.y);
				this.y = this.fn.y(this.y, this.y);
				this.r = this.fn.r(this.r);
				if(this.x > window.innerWidth ||
					this.x < 0 ||
					this.y > window.innerHeight ||
					this.y < 0
				) {
					this.r = getRandom('fnr');
					if(Math.random() > 0.4) {
						this.x = getRandom('x');
						this.y = 0;
						this.s = getRandom('s');
						this.r = getRandom('r');
					} else {
						this.x = window.innerWidth;
						this.y = getRandom('y');
						this.s = getRandom('s');
						this.r = getRandom('r');
					}
				}
			}
 
			SakuraList = function() {
				this.list = [];
			}
			SakuraList.prototype.push = function(sakura) {
				this.list.push(sakura);
			}
			SakuraList.prototype.update = function() {
				for(var i = 0, len = this.list.length; i < len; i++) {
					this.list[i].update();
				}
			}
			SakuraList.prototype.draw = function(cxt) {
				for(var i = 0, len = this.list.length; i < len; i++) {
					this.list[i].draw(cxt);
				}
			}
			SakuraList.prototype.get = function(i) {
				return this.list[i];
			}
			SakuraList.prototype.size = function() {
				return this.list.length;
			}
 
			function getRandom(option) {
				var ret, random;
				switch(option) {
					case 'x':
						ret = Math.random() * window.innerWidth;
						break;
					case 'y':
						ret = Math.random() * window.innerHeight;
						break;
					case 's':
						ret = Math.random();
						break;
					case 'r':
						ret = Math.random() * 6;
						break;
					case 'fnx':
						random = -0.5 + Math.random() * 1;
						ret = function(x, y) {
							return x + 0.5 * random - 1.7;
						};
						break;
					case 'fny':
						random = 1.5 + Math.random() * 0.7
						ret = function(x, y) {
							return y + random;
						};
						break;
					case 'fnr':
						random = Math.random() * 0.03;
						ret = function(r) {
							return r + random;
						};
						break;
				}
				return ret;
			}
 
			function startSakura() {
 
				requestAnimationFrame = window.requestAnimationFrame ||
					window.mozRequestAnimationFrame ||
					window.webkitRequestAnimationFrame ||
					window.msRequestAnimationFrame ||
					window.oRequestAnimationFrame;
				var canvas = document.createElement('canvas'),
					cxt;
				staticx = true;
				canvas.height = window.innerHeight;
				canvas.width = window.innerWidth;
				canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
				canvas.setAttribute('id', 'canvas_sakura');
				document.getElementsByTagName('body')[0].appendChild(canvas);
				cxt = canvas.getContext('2d');
				var sakuraList = new SakuraList();
				for(var i = 0; i < 50; i++) {
					var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
					randomX = getRandom('x');
					randomY = getRandom('y');
					randomR = getRandom('r');
					randomS = getRandom('s');
					randomFnx = getRandom('fnx');
					randomFny = getRandom('fny');
					randomFnR = getRandom('fnr');
					sakura = new Sakura(randomX, randomY, randomS, randomR, {
						x: randomFnx,
						y: randomFny,
						r: randomFnR
					});
					sakura.draw(cxt);
					sakuraList.push(sakura);
				}
				stop = requestAnimationFrame(function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
					sakuraList.update();
					sakuraList.draw(cxt);
					stop = requestAnimationFrame(arguments.callee);
				})
			}
 
			window.onresize = function() {
				var canvasSnow = document.getElementById('canvas_snow');
				canvasSnow.width = window.innerWidth;
				canvasSnow.height = window.innerHeight;
			}
 
			img.onload = function() {
				startSakura();
			}
 
			function stopp() {
				if(staticx) {
					var child = document.getElementById("canvas_sakura");
					child.parentNode.removeChild(child);
					window.cancelAnimationFrame(stop);
					staticx = false;
				} else {
					startSakura();
				}
			}
</script>
<script>
function clickEffect() {
let balls = [];
let longPressed = false;
let longPress;
let multiplier = 0;
let width, height;
let origin;
let normal;
let ctx;
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
const pointer = document.createElement("span");
pointer.classList.add("pointer");
document.body.appendChild(pointer);

if (canvas.getContext && window.addEventListener) {
  ctx = canvas.getContext("2d");
  updateSize();
  window.addEventListener('resize', updateSize, false);
  loop();
  window.addEventListener("mousedown", function(e) {
    pushBalls(randBetween(10, 20), e.clientX, e.clientY);
    document.body.classList.add("is-pressed");
    longPress = setTimeout(function(){
      document.body.classList.add("is-longpress");
      longPressed = true;
    }, 500);
  }, false);
  window.addEventListener("mouseup", function(e) {
    clearInterval(longPress);
    if (longPressed == true) {
      document.body.classList.remove("is-longpress");
      pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
      longPressed = false;
    }
    document.body.classList.remove("is-pressed");
  }, false);
  window.addEventListener("mousemove", function(e) {
    let x = e.clientX;
    let y = e.clientY;
    pointer.style.top = y + "px";
    pointer.style.left = x + "px";
  }, false);
} else {
  console.log("canvas or addEventListener is unsupported!");
}


function updateSize() {
  canvas.width = window.innerWidth * 2;
  canvas.height = window.innerHeight * 2;
  canvas.style.width = window.innerWidth + 'px';
  canvas.style.height = window.innerHeight + 'px';
  ctx.scale(2, 2);
  width = (canvas.width = window.innerWidth);
  height = (canvas.height = window.innerHeight);
  origin = {
    x: width / 2,
    y: height / 2
  };
  normal = {
    x: width / 2,
    y: height / 2
  };
}
class Ball {
  constructor(x = origin.x, y = origin.y) {
    this.x = x;
    this.y = y;
    this.angle = Math.PI * 2 * Math.random();
    if (longPressed == true) {
      this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
    } else {
      this.multiplier = randBetween(6, 12);
    }
    this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
    this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
    this.r = randBetween(8, 12) + 3 * Math.random();
    this.color = colours[Math.floor(Math.random() * colours.length)];
  }
  update() {
    this.x += this.vx - normal.x;
    this.y += this.vy - normal.y;
    normal.x = -2 / window.innerWidth * Math.sin(this.angle);
    normal.y = -2 / window.innerHeight * Math.cos(this.angle);
    this.r -= 0.3;
    this.vx *= 0.9;
    this.vy *= 0.9;
  }
}

function pushBalls(count = 1, x = origin.x, y = origin.y) {
  for (let i = 0; i < count; i++) {
    balls.push(new Ball(x, y));
  }
}

function randBetween(min, max) {
  return Math.floor(Math.random() * max) + min;
}

function loop() {
  ctx.fillStyle = "rgba(255, 255, 255, 0)";
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < balls.length; i++) {
    let b = balls[i];
    if (b.r < 0) continue;
    ctx.fillStyle = b.color;
    ctx.beginPath();
    ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
    ctx.fill();
    b.update();
  }
  if (longPressed == true) {
    multiplier += 0.2;
  } else if (!longPressed && multiplier >= 0) {
    multiplier -= 0.4;
  }
  removeBall();
  requestAnimationFrame(loop);
}

function removeBall() {
  for (let i = 0; i < balls.length; i++) {
    let b = balls[i];
    if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
      balls.splice(i, 1);
    }
  }
}
}
clickEffect();//调用特效函数
</script>